<template>
  <div class="registerbox">
    <el-card>
      <el-button class="fr" @click="toBack()">取消</el-button>
      <el-button class="fr" type="primary" @click="onSubmit">变更</el-button>
      <h3>文件名称</h3>
    </el-card>
    <div class="maincss">
      <el-row>
        <el-card>
          <p>基础信息</p>
          <el-divider />
          <el-form ref="form" :model="form" class="form">
            <table class="tab-box">
              <tr>
                <td>质控文件名称</td>
                <td>
                  <el-input v-model="form.fileName" />
                </td>
                <td>当前版本号</td>
                <td>
                  <el-input v-model="form.version" />
                </td>
              </tr>
              <tr>
                <td>所属项目</td>
                <td>
                  <el-input v-model="form.projectId" />
                </td>
                <td>质控文件类型</td>
                <td>
                  <el-input v-model="form.fileType" />
                </td>
              </tr>
              <tr>
                <td>创建人</td>
                <td>
                  <el-input v-model="form.creater" />
                </td>
                <td>发布日期</td>
                <td>
                  <el-input v-model="form.publishTime" />
                </td>
              </tr>
              <tr>
                <td class="widthTd">内容描述</td>
                <td colspan="3">
                  <el-input type="textarea" v-model="form.description" />
                </td>
              </tr>
              <tr>
                <td class="widthTd">附件上传</td>
                <td>
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </td>
              </tr>
            </table>
          </el-form>
        </el-card>

        <el-card>
          <p>历史版本</p>
          <el-divider />

          <el-table v-loading="loading" :data="checkList" style="width: 100%;">
            <el-table-column
              label="版本号"
              align="center"
              prop="checkNo"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="上传时间"
              align="center"
              prop="name"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="上传人" align="center" prop="checkName" />
            <el-table-column
              label="上传文件"
              align="center"
              prop="checkTime"
              :show-overflow-tooltip="true"
            />
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
          />
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getQualityFiles,
  updateQualityFiles
} from "@/api/business/qualityFiles";
export default {
  name: "quality-detail",
  components: {
    getQualityFiles,
    updateQualityFiles
  },
  props: {},
  data() {
    return {
      loading: false,
      checkList: [],
      total: 1,
      pageNum: 1,
      pageSize: 20,
      form: {
        id: 1,
        fileName: "",
        fileType: "",
        projectId: "",
        creater: "",
        publishTime: null,
        description: "",
        version: ""
      }
    };
  },
  mounted() {
    this.handleQualityFiles();
  },
  methods: {
    onSubmit() {
      updateQualityFiles(this.form).then(res => {
        this.msgSuccess("修改成功");
        this.handleClose();
      });
    },
    toBack() {
      this.$emit("func", false);
    },
    handleData(obj) {
      this.form.id = obj.id;
      this.form.fileName = obj.fileName;
      this.form.fileType = obj.fileType;
      this.form.projectId = obj.projectId;
      this.form.creater = obj.creater;
      this.form.publishTime = obj.publishTime;
      this.form.description = obj.description;
      this.form.version = obj.version;
    },
    handleQualityFiles() {
      getQualityFiles(this.form.id).then(res => {});
    },
    handleClose() {
      this.form.id = null;
      this.form.fileName = "";
      this.form.fileType = "";
      this.form.projectId = "";
      this.form.creater = "";
      this.form.publishTime = "";
      this.form.description = "";
      this.form.version = "";
      this.$emit("before-close", false);
    }
  }
};
</script>

<style scoped>
.tab-box tr {
  height: 50px;
}

.tab-box tr td {
  height: 50px;
}
</style>
